import 'dart:async';

import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:percent_indicator/circular_percent_indicator.dart';
import 'package:percent_indicator/linear_percent_indicator.dart';
import 'package:tv_friso_screen/painter/chart_bean.dart';
import 'package:tv_friso_screen/painter/view/chart_bar.dart';
import 'package:tv_friso_screen/painter/view/chart_hor_bar.dart';
import 'package:tv_friso_screen/utils/result_check_utils.dart';

import 'data_model/home_info.dart';
import 'data_model/sale_data.dart';
import 'model/response_with_object.dart';
import 'net/api_address.dart';
import 'net/data_helper.dart';
import 'net/http_manager.dart';

//销售
class SalesPage extends StatefulWidget {
  const SalesPage({super.key});

  @override
  State<SalesPage> createState() => _SalesPageState();
}

class _SalesPageState extends State<SalesPage>
    with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  List<String> zoneIndex = ["东区", "西区", "南区", "北区"];

  SaleData? saleData;

  void getSaleData() async {
    var params = {};
    var formData = DataHelper.getBaseMapParams(params);
    var response =
        await HttpManager().get(ApiAddress.getSaleData, query: formData);

    if (mounted) {
      if (response['data'] != null &&
          response['code'] == HttpManager.codeSuccess) {
        ResponseWithObject<SaleData> data =
            ResponseWithObject.fromJson(response as Map<String, dynamic>, (j) {
          if (j != null) {
            return SaleData.fromJson(j);
          } else {
            return j;
          }
        });
        if (data.code == HttpManager.codeSuccess) {
          //给首页赋值
          setState(() {
            saleData = data.data;
          });
        } else {
          ResultCheckUtils.checkResult(context, data.code, data.msg);
        }
      } else {
        ResultCheckUtils.checkResult(
            context, response['code'], response['msg']);
      }
    }
  }

  @override
  void initState() {
    super.initState();
    getSaleData();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);

    return Scaffold(
      body: Container(
        width: double.infinity,
        height: double.infinity,
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage(
              "assets/images/icon_bg_back.png",
            ),
            fit: BoxFit.fill,
          ),
        ),
        child: Row(
          children: [
            Expanded(
              child: Container(
                // color: Colors.amber,
                margin: EdgeInsets.only(
                  bottom: 70.w,
                  top: 120.w,
                ),
                padding: EdgeInsets.only(left: 72.w, right: 40.w),
                child: saleData == null || saleData!.regionShop == null
                    ? Container()
                    : Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          //东西南北
                          zoneWidget(saleData!.regionShop.zoneEast, 0),
                          zoneWidget(saleData!.regionShop.zoneWest, 1),
                          zoneWidget(saleData!.regionShop.zoneSouth, 2),
                          zoneWidget(saleData!.regionShop.zoneNorth, 3),
                        ],
                      ),
              ),
            ),
            Expanded(
              child: Container(
                margin: EdgeInsets.only(
                  bottom: 70.w,
                  top: 120.w,
                  right: 20.w,
                ),
                padding: EdgeInsets.only(left: 0.w, right: 40.w),
                child: Column(
                  children: [
                    Expanded(
                      child: Row(
                        children: [
                          Expanded(
                            child: Column(
                              children: [
                                underline(10.w, 0.w, 15.w, 30.w),
                                Row(
                                  children: [
                                    SizedBox(
                                      width: 11.w,
                                    ),
                                    Image.asset(
                                      "assets/images/icon_trangle.png",
                                      width: 14.w,
                                      height: 29.w,
                                    ),
                                    SizedBox(
                                      width: 10.w,
                                    ),
                                    Text(
                                      "年度目标完成",
                                      style: TextStyle(
                                        color: const Color(0xFFFFFFFF),
                                        fontSize: 26.sp,
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                  ],
                                ),
                                underline(19.w, 0.w, 20.w, 30.w),
                                Expanded(
                                  child: Container(
                                    color: const Color(0x260085F7),
                                    child: Row(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.center,
                                      children: [
                                        SizedBox(
                                          width: 15.w,
                                        ),
                                        CircularPercentIndicator(
                                          radius: 50.w,
                                          lineWidth: 7.w,
                                          percent: 0.6,
                                          center: Text(
                                            "60%",
                                            style: TextStyle(
                                              color: const Color(0xFFFFCA9A),
                                              fontSize: 22.sp,
                                              fontWeight: FontWeight.bold,
                                            ),
                                          ),
                                          animation: true,
                                          animationDuration: 1200,
                                          backgroundColor:
                                              const Color(0xFF34677E),
                                          progressColor:
                                              const Color(0xFF8FE1FB),
                                          circularStrokeCap:
                                              CircularStrokeCap.round,
                                        ),
                                        SizedBox(
                                          width: 15.w,
                                        ),
                                        RichText(
                                          textAlign: TextAlign.center,
                                          text: TextSpan(
                                            children: [
                                              TextSpan(
                                                text: "YTD销售额",
                                                style: TextStyle(
                                                  color:
                                                      const Color(0xFF1ED2FF),
                                                  fontSize: 26.sp,
                                                  fontWeight: FontWeight.normal,
                                                ),
                                              ),
                                              TextSpan(
                                                text: " 626,314 ",
                                                style: TextStyle(
                                                  color:
                                                      const Color(0xFFFFCA9A),
                                                  fontSize: 26.sp,
                                                  fontWeight: FontWeight.bold,
                                                ),
                                              ),
                                              TextSpan(
                                                text: "千元",
                                                style: TextStyle(
                                                  color:
                                                      const Color(0xFF1ED2FF),
                                                  fontSize: 26.sp,
                                                  fontWeight: FontWeight.normal,
                                                ),
                                              ),
                                            ],
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                          SizedBox(
                            width: 15.w,
                          ),
                          Expanded(
                            child: Column(
                              children: [
                                underline(10.w, 0.w, 15.w, 30.w),
                                Row(
                                  children: [
                                    SizedBox(
                                      width: 11.w,
                                    ),
                                    Image.asset(
                                      "assets/images/icon_trangle.png",
                                      width: 14.w,
                                      height: 29.w,
                                    ),
                                    SizedBox(
                                      width: 10.w,
                                    ),
                                    Text(
                                      "月度销售趋势",
                                      style: TextStyle(
                                        color: const Color(0xFFFFFFFF),
                                        fontSize: 26.sp,
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                  ],
                                ),
                                underline(19.w, 0.w, 20.w, 30.w),
                                Expanded(
                                  child: Container(
                                    color: const Color(0x260085F7),
                                    child: buildChartBarCircle(context),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                    Expanded(
                      child: Row(
                        children: [
                          Expanded(
                            child: Column(
                              children: [
                                underline(10.w, 0.w, 15.w, 30.w),
                                Row(
                                  children: [
                                    SizedBox(
                                      width: 11.w,
                                    ),
                                    Image.asset(
                                      "assets/images/icon_trangle.png",
                                      width: 14.w,
                                      height: 29.w,
                                    ),
                                    SizedBox(
                                      width: 10.w,
                                    ),
                                    Text(
                                      "产品品类排行",
                                      style: TextStyle(
                                        color: const Color(0xFFFFFFFF),
                                        fontSize: 26.sp,
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                  ],
                                ),
                                underline(19.w, 0.w, 20.w, 30.w),
                                Expanded(
                                  child: Container(
                                    color: const Color(0x260085F7),
                                    // color: Colors.orange,
                                    child: buildChartHorBarCircle(context),
                                  ),
                                ),
                              ],
                            ),
                          ),
                          SizedBox(
                            width: 15.w,
                          ),
                          Expanded(
                            child: Column(
                              children: [
                                underline(10.w, 0.w, 15.w, 30.w),
                                Row(
                                  children: [
                                    SizedBox(
                                      width: 11.w,
                                    ),
                                    Image.asset(
                                      "assets/images/icon_trangle.png",
                                      width: 14.w,
                                      height: 29.w,
                                    ),
                                    SizedBox(
                                      width: 10.w,
                                    ),
                                    Text(
                                      "YTD城市销售排行",
                                      style: TextStyle(
                                        color: const Color(0xFFFFFFFF),
                                        fontSize: 26.sp,
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                  ],
                                ),
                                underline(19.w, 0.w, 20.w, 30.w),
                                Expanded(
                                  child: Container(
                                    color: const Color(0x260085F7),
                                    //柱状图
                                    child: buildChartBarCircle(context),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                    Expanded(
                      child: Row(
                        children: [
                          Expanded(
                            child: Column(
                              children: [
                                underline(10.w, 0.w, 15.w, 30.w),
                                Row(
                                  children: [
                                    SizedBox(
                                      width: 11.w,
                                    ),
                                    Image.asset(
                                      "assets/images/icon_trangle.png",
                                      width: 14.w,
                                      height: 29.w,
                                    ),
                                    SizedBox(
                                      width: 10.w,
                                    ),
                                    Text(
                                      "分类明细",
                                      style: TextStyle(
                                        color: const Color(0xFFFFFFFF),
                                        fontSize: 26.sp,
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                    Expanded(
                                      child: GestureDetector(
                                        onTap: () {
                                          print("点击分类明细--------- ");
                                        },
                                        child: Container(
                                          color: const Color(0x260085F7),
                                          padding: EdgeInsets.only(
                                              top: 5.w,
                                              bottom: 5.w,
                                              right: 10.w),
                                          child: Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.end,
                                            children: [
                                              Text(
                                                "皇家美素佳儿",
                                                style: TextStyle(
                                                  color:
                                                      const Color(0xFFFFFFFF),
                                                  fontSize: 26.sp,
                                                  fontWeight: FontWeight.bold,
                                                ),
                                                textAlign: TextAlign.end,
                                              ),
                                              Image.asset(
                                                "assets/images/sales_2.webp",
                                                width: 25.w,
                                                height: 25.w,
                                              ),
                                            ],
                                          ),
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                                underline(19.w, 0.w, 0.w, 30.w),
                                Expanded(
                                  child: Container(
                                    padding:
                                        EdgeInsets.only(top: 15.w, bottom: 5.w),
                                    color: const Color(0x260085F7),
                                    child: Column(
                                      children: [
                                        Row(
                                          children: [
                                            SizedBox(
                                              width: 15.w,
                                            ),
                                            Expanded(
                                              child: Row(
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.center,
                                                children: [
                                                  Container(
                                                    width: 10.w,
                                                    height: 10.w,
                                                    decoration: BoxDecoration(
                                                      color: const Color(
                                                          0xFF1ED2FF),
                                                      borderRadius:
                                                          BorderRadius.all(
                                                              Radius.circular(
                                                                  25.w)),
                                                    ),
                                                  ),
                                                  SizedBox(
                                                    width: 5.w,
                                                  ),
                                                  Text(
                                                    "本月销量占比",
                                                    style: TextStyle(
                                                      color: const Color(
                                                          0xFF1ED2FF),
                                                      fontSize: 20.sp,
                                                      fontWeight:
                                                          FontWeight.normal,
                                                    ),
                                                  ),
                                                ],
                                              ),
                                            ),
                                            Expanded(
                                              child: Row(
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.center,
                                                children: [
                                                  Container(
                                                    width: 10.w,
                                                    height: 10.w,
                                                    decoration: BoxDecoration(
                                                      color: const Color(
                                                          0xFF1ED2FF),
                                                      borderRadius:
                                                          BorderRadius.all(
                                                              Radius.circular(
                                                                  25.w)),
                                                    ),
                                                  ),
                                                  SizedBox(
                                                    width: 5.w,
                                                  ),
                                                  Text(
                                                    "本月销量占比",
                                                    style: TextStyle(
                                                      color: const Color(
                                                          0xFF1ED2FF),
                                                      fontSize: 20.sp,
                                                      fontWeight:
                                                          FontWeight.normal,
                                                    ),
                                                  ),
                                                ],
                                              ),
                                            ),
                                            Expanded(
                                              child: Row(
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.center,
                                                children: [
                                                  Container(
                                                    width: 10.w,
                                                    height: 10.w,
                                                    decoration: BoxDecoration(
                                                      color: const Color(
                                                          0xFF1ED2FF),
                                                      borderRadius:
                                                          BorderRadius.all(
                                                              Radius.circular(
                                                                  25.w)),
                                                    ),
                                                  ),
                                                  SizedBox(
                                                    width: 5.w,
                                                  ),
                                                  Text(
                                                    "本月销量占比",
                                                    style: TextStyle(
                                                      color: const Color(
                                                          0xFF1ED2FF),
                                                      fontSize: 20.sp,
                                                      fontWeight:
                                                          FontWeight.normal,
                                                    ),
                                                  ),
                                                ],
                                              ),
                                            ),
                                            Expanded(
                                              flex: 2,
                                              child: Text(
                                                "品类月度目标完成百分比",
                                                style: TextStyle(
                                                  color:
                                                      const Color(0xFF1ED2FF),
                                                  fontSize: 20.sp,
                                                  fontWeight: FontWeight.normal,
                                                ),
                                                textAlign: TextAlign.center,
                                              ),
                                            ),
                                          ],
                                        ),
                                        Row(
                                          children: [
                                            SizedBox(
                                              width: 15.w,
                                            ),
                                            Expanded(
                                              child: CircularPercentIndicator(
                                                radius: 50.w,
                                                lineWidth: 7.w,
                                                percent: 0.6,
                                                center: Text(
                                                  "60%",
                                                  style: TextStyle(
                                                    color:
                                                        const Color(0xFFFFCA9A),
                                                    fontSize: 22.sp,
                                                    fontWeight: FontWeight.bold,
                                                  ),
                                                ),
                                                animation: true,
                                                animationDuration: 1200,
                                                backgroundColor:
                                                    const Color(0xFF34677E),
                                                progressColor:
                                                    const Color(0xFF8FE1FB),
                                                circularStrokeCap:
                                                    CircularStrokeCap.round,
                                              ),
                                            ),
                                            Expanded(
                                              child: RichText(
                                                textAlign: TextAlign.center,
                                                text: TextSpan(
                                                  children: [
                                                    TextSpan(
                                                      text: "7279",
                                                      style: TextStyle(
                                                        color: const Color(
                                                            0xFFFFCA9A),
                                                        fontSize: 26.sp,
                                                        fontWeight:
                                                            FontWeight.normal,
                                                      ),
                                                    ),
                                                    TextSpan(
                                                      text: "单",
                                                      style: TextStyle(
                                                        color: const Color(
                                                            0xFF1ED2FF),
                                                        fontSize: 20.sp,
                                                        fontWeight:
                                                            FontWeight.normal,
                                                      ),
                                                    ),
                                                  ],
                                                ),
                                              ),
                                            ),
                                            Expanded(
                                              child: RichText(
                                                textAlign: TextAlign.center,
                                                text: TextSpan(
                                                  children: [
                                                    TextSpan(
                                                      text: "25,054.5",
                                                      style: TextStyle(
                                                        color: const Color(
                                                            0xFFFFCA9A),
                                                        fontSize: 26.sp,
                                                        fontWeight:
                                                            FontWeight.normal,
                                                      ),
                                                    ),
                                                    TextSpan(
                                                      text: "箱",
                                                      style: TextStyle(
                                                        color: const Color(
                                                            0xFF1ED2FF),
                                                        fontSize: 20.sp,
                                                        fontWeight:
                                                            FontWeight.normal,
                                                      ),
                                                    ),
                                                  ],
                                                ),
                                              ),
                                            ),
                                            Expanded(
                                              flex: 2,
                                              child: LinearPercentIndicator(
                                                lineHeight: 20.w,
                                                percent: 0.5,
                                                animation: true,
                                                animationDuration: 1200,
                                                backgroundColor:
                                                    const Color(0xFF34677E),
                                                progressColor:
                                                    const Color(0xFF8FE1FB),
                                                center: Text(
                                                  "50%",
                                                  style: TextStyle(
                                                    color:
                                                        const Color(0xFF34677E),
                                                    fontSize: 22.sp,
                                                    fontWeight: FontWeight.bold,
                                                  ),
                                                ),
                                                barRadius:
                                                    Radius.circular(30.w),
                                              ),
                                            ),
                                          ],
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget underline(double top, double left, double bottom, double mWidth) {
    return Container(
      margin: EdgeInsets.only(
        top: top,
        left: left,
        bottom: bottom,
      ),
      color: const Color(0xFF0F5FAF),
      width: double.infinity,
      height: 1.5.w,
      child: Stack(
        children: [
          Container(
            color: const Color(0xff00B7FE),
            width: mWidth,
            height: 2.w,
          ),
        ],
      ),
    );
  }

  //东西南北区
  Widget zoneWidget(ZoneData data, int index) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        underline(10.w, 0.w, 15.w, 30.w),
        Row(
          children: [
            SizedBox(
              width: 11.w,
            ),
            Image.asset(
              "assets/images/icon_trangle.png",
              width: 14.w,
              height: 29.w,
            ),
            SizedBox(
              width: 10.w,
            ),
            Text(
              zoneIndex[index],
              style: TextStyle(
                color: const Color(0xFFFFFFFF),
                fontSize: 26.sp,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
        underline(19.w, 0.w, 20.w, 30.w),
        Row(
          children: [
            SizedBox(
              width: 10.w,
            ),
            Expanded(
              child: zoneItem("本月金装活跃门店", data.goldShopNumber),
            ),
            SizedBox(
              width: 10.w,
            ),
            Expanded(
              child: zoneItem("本月皇家活跃门店", data.prestigeShopNumber),
            ),
            SizedBox(
              width: 10.w,
            ),
            Expanded(
              child: zoneItem("本月源悦活跃门店", data.dLShopNumber),
            ),
            SizedBox(
              width: 10.w,
            ),
            Expanded(
              child: zoneItem("P3M金装活跃门店", data.p3MGoldShopNumber),
            ),
            SizedBox(
              width: 10.w,
            ),
            Expanded(
              child: zoneItem("P3M皇家活跃门店", data.p3MPrestigeShopNumber),
            ),
            SizedBox(
              width: 10.w,
            ),
            Expanded(
              child: zoneItem("P3M源悦活跃门店", data.p3MDLShopNumber),
            ),
            SizedBox(
              width: 10.w,
            ),
          ],
        ),
        SizedBox(
          height: 15.w,
        ),
      ],
    );
  }

  Widget zoneItem(String title, String value) {
    return Container(
      alignment: Alignment.center,
      padding: EdgeInsets.only(
        top: 10.w,
        bottom: 10.w,
      ),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(
          Radius.circular(5.w),
        ),
        border: Border.all(
          color: const Color(0xFF829EEE),
          width: 1.w,
        ),
      ),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Expanded(
                child: Text(
                  title,
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                    color: const Color(0xFF1ED2FF),
                    fontSize: 12.sp,
                    fontWeight: FontWeight.bold,
                  ),
                  textAlign: TextAlign.center,
                ),
              ),
            ],
          ),
          SizedBox(
            height: 7.w,
          ),
          value.isEmpty
              ? emptyWidget(0, 0, 0)
              : Text(
                  value,
                  style: TextStyle(
                    color: const Color(0xFFFFCA9A),
                    fontSize: 16.sp,
                    fontWeight: FontWeight.bold,
                  ),
                ),
        ],
      ),
    );
  }

  Widget emptyWidget(double top, double left, double mWidth) {
    return Container(
      margin: EdgeInsets.only(
        top: top,
        left: left,
      ),
      color: const Color(0xff1ED2FF),
      width: 25.w,
      height: 2.w,
    );
  }

  ///bar-circle
  Widget buildChartBarCircle(context) {
    var chartBar = ChartBar(
      chartBeans: [
        ChartBean(x: '广州市', y: 30, color: Colors.blue),
        ChartBean(x: '深圳市', y: 100, color: Colors.blue),
        ChartBean(x: '成都市', y: 70, color: Colors.blue),
        ChartBean(x: '西安市', y: 70, color: Colors.blue),
        ChartBean(x: '重庆市', y: 30, color: Colors.blue),
        ChartBean(x: '武汉市', y: 90, color: Colors.blue),
        ChartBean(x: '惠州市', y: 250, color: Colors.blue),
      ],
      size: Size(MediaQuery.of(context).size.width,
          MediaQuery.of(context).size.height / 5 * 1.8),
      rectColor: Colors.deepPurple,
      isShowX: true,
      fontColor: Colors.white,
      rectShadowColor: Colors.white.withOpacity(0.5),
      isReverse: false,
      isCanTouch: false,
      isShowTouchShadow: false,
      isShowTouchValue: false,
      rectRadiusTopLeft: 0.w,
      rectRadiusTopRight: 0.w,
      duration: const Duration(milliseconds: 1000),
      fontSize: 12.sp,
    );
    return chartBar;
  }

  Widget buildChartHorBarCircle(context) {
    var chartBar = ChartHorBar(
      chartBeans: [
        ChartBean(x: '美素佳儿源跃', y: 30, color: Colors.blue),
        ChartBean(x: '美素佳儿米粉', y: 100, color: Colors.blue),
        ChartBean(x: '字母儿童粉', y: 70, color: Colors.blue),
        ChartBean(x: '皇家美素佳儿', y: 70, color: Colors.blue),
        ChartBean(x: '重庆市', y: 30, color: Colors.pink),
        ChartBean(x: '武汉市', y: 90, color: Colors.orange),
        ChartBean(x: '惠州市', y: 250, color: Colors.blue),
      ],
      size: Size(MediaQuery.of(context).size.width,
          MediaQuery.of(context).size.height / 5 * 1.8),
      rectColor: Colors.deepPurple,
      isShowX: true,
      fontColor: Colors.white,
      rectShadowColor: Colors.white.withOpacity(0.5),
      isReverse: false,
      isCanTouch: false,
      isShowTouchShadow: false,
      isShowTouchValue: false,
      rectRadiusTopLeft: 0.w,
      rectRadiusTopRight: 0.w,
      duration: const Duration(milliseconds: 1000),
      fontSize: 12.sp,
    );
    return chartBar;
  }
}
